<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/banner.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="mybanner">
        <ul class="hot">
            <li>
                <a href="#"> <img src="images/banner1.jpg" alt=""> </a>
            </li>
            <li>
                <a href="#"> <img src="images/banner2.jpg" alt=""> </a>
            </li>
            <li>
                <a href="#"> <img src="images/banner3.jpg" alt=""> </a>
            </li>
            <li>
                <a href="#"> <img src="images/banner4.jpg" alt=""> </a>
            </li>
        </ul>
        <div class='arrow'>
            <span class="prev"> < </span>
            <span class="next"> > </span>
        </div>
        <ul class="circle-list">
            <li class="circle active" data-n="0"></li>
            <li class="circle" data-n="1"></li>
            <li class="circle" data-n="2"></li>
            <li class="circle" data-n="3"></li>
        </ul>
    </div>
</body>
<script>
    // // JavaScript写的
    // //滑动动画
    // function animate(obj,target,callback) {
    //     clearInterval(obj.timer)
    //     obj.timer = setInterval(function() {
    //         // var step = Math.ceil((target - obj.offsetLeft) / 10)
    //         var step = (target - obj.offsetLeft) / 10;
    //         step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //         if (obj.offsetLeft==target) {
    //             clearInterval(obj.timer)
    //             // if(callback){
    //             //     callback();
    //             // }
    //             callback && callback()
    //         }
    //         obj.style.left = obj.offsetLeft+step+'px'
    //     }, 15);
    // }

    // var mybanner = document.querySelector('.mybanner');
    // var arrow = document.querySelector('.arrow');

    // var circleList = document.querySelector('.circle-list') 
    // var circles = circleList.querySelectorAll('li')
    // for (let i = 0; i < circles.length; i++) {
    //     circles[i].addEventListener('click',function(){
    //         for (let i = 0; i < circles.length; i++) {
    //             circles[i].style.backgroundColor = 'white'
    //         }
    //         circles[i].style.backgroundColor = 'red'
    //         console.log(circles.offsetWidth);
            
    //         animate( hot,-mybanner.offsetWidth*i)
    //         circle_num=num=i;

            
    //     })
        
    // }


    // var prev = document.querySelector('.prev')
    // var next = document.querySelector('.next')
    // var hot = document.querySelector('.hot')
    // var first = hot.children[0].cloneNode(true)
    // hot.appendChild(first);
    // var num = 0;
    // var circle_num = 0
    // var flag = true;//节流阀
    // //上一页
    // prev.addEventListener('click',function(){

    //     // if (num == 0) {
    //     //     num = hot.children.length-1;
    //     //     hot.style.left = (-num*hot.offsetWidth)+'px';
            
    //     // }
    //     // num--;
    //     // animate(hot,-num * mybanner.offsetWidth)
    //     // circle_num--;
    //     // if (circle_num < 0) {
    //     //     circle_num=circles.length-1
    //     // }
    //     // circleChange()
    //     if (flag) {
    //         flag =false;
    //         if (num == 0) {
    //         num = hot.children.length-1;
    //         hot.style.left = -num*hot.children[0].offsetWidth+'px';
    //     }
    //     num--;
    //     animate(hot,-num * mybanner.offsetWidth,function () {
    //         flag = true;
    //     })
    //     circle_num--;
    //     if (circle_num < 0) {
    //         circle_num=circles.length-1
    //     }
    //     circleChange()
    //     }
    // })
    // //改变小圆圈函数
    // function circleChange() {
    //     for (let i = 0; i < circles.length; i++) {
    //         circles[i].style.backgroundColor = 'white'
    //     }
        
    //     circles[circle_num].style.backgroundColor = 'red';
    // }
    // //下一页
    // next.addEventListener('click',function(){
    //     if (flag) {
    //         flag = false;
    //         if (num == hot.children.length-1) {
    //         hot.style.left = 0;
    //         num = 0;
    //     }
    //     num++;
    //     animate(hot,-num * mybanner.offsetWidth,function () {
    //         flag = true;
    //     })
    //     circle_num++;
    //     if (circle_num == circles.length) {
    //         circle_num=0;
    //     }
    //     circleChange()
    //     }
    // })

    // //鼠标移出
    // mybanner.addEventListener('mouseleave',function () {
    //     arrow.style.display = 'none'
    //     timer = setInterval(function () {
    //     next.click();
    // },2000)
    // })
    // //鼠标经过显示箭头
    // mybanner.addEventListener('mouseenter',function () {
    //     arrow.style.display = 'block';
    //     clearInterval(timer);
    //     timer = null
    // })
    // //自动播放
    // var timer = setInterval(function () {
    //     next.click();
    // },2000)


    // jQuery写的
//    滑动动画
   function animate(obj, target, callback) {
        clearInterval(obj.timer); 
        obj.timer = setInterval(function () {
            var step = (target - $(obj).position().left) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if ($(obj).position().left == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            $(obj).css('left', $(obj).position().left + step + 'px');
        }, 15);
    }

    $(document).ready(function () {
        var $mybanner = $('.mybanner');
        var $arrow = $('.arrow');
        var $circleList = $('.circle-list');
        var $circles = $circleList.find('li');
        var $hot = $('.hot');
        var $prev = $('.prev');
        var $next = $('.next');
        var $first = $hot.children().first().clone();
        $hot.append($first);

        var num = 0;
        var circle_num = 0;
        var flag = true; //节流阀

        $circles.on('click', function () {
            var index = $(this).index();
            $circles.css('background-color', 'white');
            $(this).css('background-color', 'red');
            animate($hot[0], -$mybanner.width() * index);
            circle_num = num = index;
        });

        $prev.on('click', function () {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = $hot.children().length - 1;
                    $hot.css('left', -num * $hot.children().first().width() + 'px');
                }
                num--;
                animate($hot[0], -num * $mybanner.width(), function () {
                    flag = true;
                });
                circle_num--;
                if (circle_num < 0) {
                    circle_num = $circles.length - 1;
                }
                circleChange();
            }
        });

        $next.on('click', function () {
            if (flag) {
                flag = false;
                if (num == $hot.children().length - 1) {
                    $hot.css('left', 0);
                    num = 0;
                }
                num++;
                animate($hot[0], -num * $mybanner.width(), function () {
                    flag = true;
                });
                circle_num++;
                if (circle_num == $circles.length) {
                    circle_num = 0;
                }
                circleChange();
            }
        });

        function circleChange() {
            $circles.css('background-color', 'white');
            $circles.eq(circle_num).css('background-color', 'red');
        }

        $mybanner.on('mouseleave', function () {
            $arrow.hide();
            timer = setInterval(function () {
                $next.click();
            }, 2000);
        });

        $mybanner.on('mouseenter', function () {
            $arrow.show();
            clearInterval(timer);
            timer = null;
        });

        var timer = setInterval(function () {
            $next.click();
        }, 2000);
    });
</script>
</html>